<template>
  <div class="downmessage">
    <div class="troubledown">
      <table class="table" v-if="caseList.length > 0">
        <thead>
          <th v-for="(label, index) in caselabels" :key="index">{{label}}</th>
        </thead>
        <tr v-for="(list, index) in caseList" :key="index">
          <td>{{list.startTime | dateFormat}}</td>
          <td>
            <!-- 下载 -->
            <a @click.prevent="reportDownloads(list.riskreportPath)" v-if="list.riskreportPath">
              {{list.riskreportPath || '--'}}
            </a>
            <span v-else>
              --
            </span>
          </td>
          <td>{{list.operator || '--'}}</td>
          <!-- <td>{{list.onlineCondition || '--'}}/{{list.outlineCondition || '--'}}</td> -->
          <td>{{list.condition || '--'}}</td>
          <td>{{caseTypes[list.caseType - 1] || '--'}}</td>
          <td>
            <router-link tag="a" target="_blank" :to="{path:'/ManageList/history',query:{name:entname,id:list.id,scree:'历史排查'}}">
              查看
            </router-link>
          </td>
        </tr>
      </table>
      <j-no-data :mode="'b'" msg="b" v-else-if="state === '归档' && caseList.length <= 0"></j-no-data>
    </div>
    <div class="pigeonhole" v-if="state === '线上排查' || state === '线下排查'">
      <el-form ref="form" class="form">
        <el-form-item label="*排查情况" class="pr">
          <el-input type="textarea" v-model="form.condition" class="pl"></el-input>
        </el-form-item>
        <el-form-item label="*处理结果">
          <el-radio-group v-model="form.casename" class="pl" v-if="state === '线上排查'">
            <el-radio v-for="(label, index) in radios" :label="label" :key="index + 10" @change="changeCase"></el-radio>
          </el-radio-group>
          <el-radio-group v-model="form.casename" class="pl" v-if="state === '线下排查'">
            <el-radio v-for="(label, index) in radiosdown" :label="label" :key="index + 21" @change="changeCase"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="监管状态" v-if="caseShow">
          <el-radio-group v-model="form.controlStatus" class="pl">
            <el-radio v-for="(caseData, index) in cases" :label="caseData" :key="index + 1" @change="changeDialog"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="*排查文件" width="50%">
          <!-- <a class="pl upfiles" @click.prevent="uploadShow">上传附件</a> -->
          <!-- <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-change="handleChange"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload> -->
          <div class="wid50">
            <el-upload 
              :action="uploadAction"
              class="pl upfiles"
              :before-upload="beforeAvatarUpload"
              :limit="10"
              name="resFile"
              :data="fileName"
              :accept="acceptList"
              :on-success="uploadSuccess"
              :on-error="uploadError"
              :file-list="fileLists"
              :on-remove="delFile">
              <el-button size="small" plain :disabled="uploadState">上传附件</el-button>
            </el-upload>
          </div>
          <!-- <el-tooltip class="item" effect="dark" placement="right" v-if="fileList.length > 0">
            <div slot="content">
              <p class="file-list" v-for="(item,idx) in fileList" :key="idx"><span>{{item.name}}</span></p>
            </div>
            <div class="uploadingFiles">
              <span class="file-list" v-for="(item,idx) in fileList" :key="idx">{{item.name}}</span>
            </div>
          </el-tooltip> -->
        </el-form-item>
        <el-form-item class="center">
          <el-button type="primary" @click="onSave" class="wid100" :disabled="mesgFlag">保存</el-button>
          <el-button type="primary" @click="onSubmit" class="wid100" :disabled="subFlag">提交</el-button>
        </el-form-item>
      </el-form>
      <!-- 文件上传 -->
      <jDialog :initShow="show" initTitle="企业文件上传" @closing="resetShow" ref="uploadBox">
        <div class="upload-box">
          <el-form label-width="100px" :model="postData" :rules="rules1" ref="postData">
            <el-form-item label="企业名称：" prop="entName">
              <!-- <el-input class="ent-name" placeholder="输入企业名称或者关键词" v-model="postData.entName" disabled></el-input> -->
              {{postData.entName}}
            </el-form-item>
            <el-form-item label="文件上传：" :error="fileError">
              
            </el-form-item>
            <el-form-item>
              <el-button class="btn" type="primary" @click="upload">确 定 上 传</el-button>
              <!-- <el-button class="btn" type="primary" plain @click="resetShow">取 消</el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </jDialog>
      <!-- 监管状态选择 -->
      <j-dialog :initTitle="'是否确定加入'+form.controlStatus" ref="importantDia" class="detail-dialog" @closing="dialogClose" v-show="formShow">
        <h5 v-if="form.controlStatus !== '设为安全' && form.controlStatus !== '白名单企业'" class="h5sure">选定的监管状态为 {{form.controlStatus}}</h5>
        <h5 v-if="form.controlStatus === '白名单企业'">请选择白名单类型</h5>
        <p v-if="form.controlStatus === '白名单企业'">
          <span v-for="(item,index) in securityDate" v-bind:key="index+18">
            <input :id="'securityIndex'+index" type="radio" name="reason" :value="index+18" v-model="listValue"/>
            <label :for="'securityIndex'+index">{{item}}</label>
          </span>
        </p>
        <h5 v-if="form.controlStatus === '设为安全'">请选择操作原因</h5>
        <p v-if="form.controlStatus === '设为安全'">
          <span v-for="(item,index) in securityDate5" v-bind:key="index+28">
            <input :id="'security5Index'+index" type="radio" name="reason" :value="index+28" v-model="listValue"/>
            <label :for="'security5Index'+index">{{item}}</label>
          </span>
        </p>
        <h5 v-if="form.controlStatus === '设为安全' || form.controlStatus === '白名单企业'">请选择安全期限</h5>
        <p v-if="form.controlStatus === '设为安全'">
          <span v-for="(item,index) in securityDate2" v-bind:key="index+9">
            <input :id="'security2Index'+index" :label="1" type="radio" name="limit" :value="index+9" v-model="operateValue"/>
            <label :for="'security2Index'+index">{{item}}</label>
          </span>
        </p>
        <p v-if="form.controlStatus === '白名单企业'">
          <span v-for="(item,index) in securityDate3" v-bind:key="index">
            <input :id="'security3Index'+index" :label="1" type="radio" name="limit" :value="index" v-model="operateValue"/>
            <label :for="'security3Index'+index">{{item}}</label>
          </span>
        </p>
        <h5 v-if="form.controlStatus === '设为安全' || form.controlStatus === '白名单企业'">请填写备注</h5>
        <p v-if="form.controlStatus === '设为安全' || form.controlStatus === '白名单企业'">
          <!-- <el-input class="ent-name" type="textarea" placeholder="" v-model="remarks"></el-input> -->
          <!-- <span class="remarkspan">备注</span> -->
          <!-- <el-input class="remark" v-model="remarkName"></el-input> -->
          <textarea class="ent-name" cols="30" rows="10" v-model="remarks"></textarea>
        </p>
        <p class="errMsg" v-if="form.controlStatus === '设为安全' || form.controlStatus === '白名单企业'">{{errMsg}}</p>
        <div class="btn">
          <button class="save-btn" @click="dialogSure">确 定</button>
          <!-- <button class="cancle-btn" @click="dialogClose()">取 消</button> -->
        </div>
      </j-dialog>
    </div>
  </div>
</template>

<script>
import {
  jLoading,
  jDialog,
  jNoData
} from '../../components'
import _ from '../../../static/js/underscore.js'
import {
  management as mpi,
  entdetail as api
} from '../../api'
export default {
  data() {
    return {
      state:'',
      name:'',
      time:'',
      entname: '',
      mesgFlag: false,
      subFlag: false,
      // 表头属性
      states: [
        {
          name:'企业预警',
          flag: false
        },
        {
          name:'线上排查',
          flag: true
        },
        {
          name:'线下排查',
          flag: false
        },
        {
          name:'归档',
          flag: false
        }
      ],
      // 排查列表属性
      caselabels: ['排查日期', '风险报告', '排查人', '排查情况', '处理结果', '排查记录'],
      // 排查列表list
      caseList: [ ],
      // 处理结果
      radios: ['线下排查', '移交工商', '移交公安', '自行处置', '归档'],
      radiosdown: ['移交工商', '移交公安', '自行处置', '归档'],
      // 监管状态
      cases: ['重点监控', '一般监控', '设为安全', '白名单企业'],
      // form属性
      form: {
        casename: '',
        caseType: '',
        // 处理结果
        condition: ''
      },
      // form规则
      rules: {
        condition: [
          {
            required: true, message: '请输入排查情况', trigger: 'blur'
          }
        ],
        casename: [
          {
            required: true, message: '请选择处理结果', trigger: 'change'
          }
        ]
      },
      // 弹窗form规则
      rules1: {
        entName: [
          {
            required: true,
            message: '请输入关联的企业名称',
            trigger: 'blur'
          },
          {
            max: 50,
            message: '最多不能超过50个字符',
            trigger: 'blur'
          }
        ],
        fileType: [
          {
            required: true,
            message: '请选择类型',
            trigger: 'blur'
          }
        ]
      },
      // 历史排查情况
      history: { },
      // 上传
      postData: {
        entName: this.entname,
        fileType: null,
        type: '',
        uplodeDescribe: '',
        file: ''
      },
      postDataAtr: [],
      uploadState: false,
      // url
      uploadAction: window.api_upload,
      fileName: {
        filename: ''
      },
      caseTypes:['线上排查', '线下排查', '移交工商', '移交公安', '自行处置', '归档'],
      fileError: '',
      // acceptList: 'application/pdf,application/vnd.ms-excel,application/msword,application/vnd.ms-works,image/*',
      acceptList: 'application/pdf,application/vnd.ms-excel,application/msword,application/vnd.ms-works,image/*,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      show: false,
      fileList:[],
      fileLists:[],
      processStatus:['企业预警', '线上排查中', '线下排查中', '归档'],
      // items
      items: [],
      // 监管状态flag
      caseShow: false,
      // 白名单状态
      securityDate: ['中央企业', '国资企业', '优质企业', '挂牌企业', '其他'],
      // 操作原因
      securityDate5: ['已排查风险', '暂无风险', '其他'],
      cStatus:['一般状态', '重点监控', '设为安全', '已处理', '白名单企业'],
      listValue: '',
      operateValue: '',
      remarks: '',
      errMsg: '',
      securityDate3: ['一个月', '三个月', '六个月', '一年', '永久安全'],
      // 安全企业
      securityDate2: ['一个月', '三个月', '六个月', '一年', '永久安全'],
      formShow: false
    }
  },
  components: {
    jLoading,
    jDialog,
    jNoData
  },
  mounted() {
    this.entname = this.$route.query.name || ''
    this.id = this.$route.query.id || ''
    this.state = this.states[this.$route.query.state].name || ''
    //  3 2 1
    this.states.map(state => {
      state.flag = false
      if (state.name === this.state) {
        state.flag = true
      }
    })
    this.postData.entName = this.entname
    if (this.state === '归档') {
      this.getcaseList()
    } else if (this.state === '线上排查' || this.state === '线下排查') {
      this.getData()
      this.getcaseList()
    }
  },
  methods: {
    getcaseList() {
      let params = {
        entName: this.entname,
        processStatus: 3,
        isDistinct: 0
      }
      mpi.getRiskList(params).then(ret => {
        // console.log(ret.data)
        this.caseList = ret.data.list
      }).catch(err => {
        console.log(err)
      })
    },
    getData() {
      let params = {
        id: this.id
      }
      mpi.getoprateCaseProcessInfo(params).then(ret => {
        if (ret.data) {
          // 排查情况
          if (ret.data.caseType) {
            this.form.caseType = ret.data.caseType
            this.form.casename = this.caseTypes[ret.data.caseType - 1]
          }
          if (this.form.casename === '移交工商' || this.form.casename === '归档') {
            this.caseShow = true
          }
          if (ret.data.condition) {
            this.form.condition = ret.data.condition
          }
          if (ret.data.controlStatus) {
            this.form.cStatus = ret.data.controlStatus
            this.form.controlStatus = this.cStatus[ret.data.controlStatus]
          }
          if (ret.data.attachmentName) {
            this.form.attachmentName = ret.data.attachmentName
          }
          if (ret.data.attachmentPath) {
            this.form.attachmentPath = ret.data.attachmentPath
          }
          if (ret.data.oprateId) {
            this.form.oprateId = ret.data.oprateId
          }
          if (ret.data.attachmentName || ret.data.attachmentPath) {
            let name = ret.data.attachmentName.split(',')
            let url = ret.data.attachmentPath.split(',')
            this.fileList = []
            this.fileLists = []
            name.map(item => {
              this.fileList.push({
                name:item
              })
              this.fileLists.push({
                name:item
              })
            })
            this.fileList.map((item, ind) => {
              item.url = url[ind]
            })
            this.fileLists.map((item, ind) => {
              item.url = url[ind]
            })
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 下载报告
    reportDownloads(name) {
      this.$msgbox({
        title: '系统提示',
        message: '<span>由于文件过大导致下载时间过长，请耐心等待</span>',
        center: true,
        roundButton: true,
        customClass: 'messageBox',
        type: 'info',
        dangerouslyUseHTMLString: true,
        callback: () => {}
      })
      location.href = window.api_host + '/entListAndDetail/downloadRiskReport?riskReportPath=' + encodeURI(encodeURI(name))
    },
    // 上传
    upload() {
      this.$refs['postData'].validate(valid => {
        if (valid) {
          if (this.postDataAtr.length === 0) {
            this.fileError = '请上传文件'
          } else {
            // let params = this.postData
            // params.resFile = JSON.stringify(this.fileList)
            // for (var i = 0; i < this.postDataAtr.length; i++) {
            //   this.fileList.push({
            //     name: this.fileName.filename,
            //     url: this.postDataAtr[i].resOriginalUrl
            //   })
            // }
            // this.fileList.map(item => {
            //   names += item.name + ','
            //   urls += item.url + ','
            // })
            // this.form.attachmentName = names.slice(0, names.length - 1)
            // this.form.attachmentPath = urls.slice(0, urls.length - 1)
            this.show = false
          }
        } else {
          return false
        }
      })
    },
    beforeAvatarUpload(file) {
      if (
        file.type !== 'application/pdf' &&
        file.type !== 'application/vnd.ms-excel' &&
        file.type !== 'application/msword' &&
        file.type !== 'application/vnd.ms-works' &&
        file.type !== 'image/jpeg' &&
        file.type !== 'image/png' &&
        file.type !== 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' &&
        file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      ) {
        // this.fileList.unshift({
        //   name: this.fileName.filename,
        //   url: ''
        // })
        this.tips('请上传 pdf,doc,xls 文件', 'warning')
        return false
      }
      if (file.size > 31457280) {
        // this.fileList.unshift({
        //   name: this.fileName.filename,
        //   url: ''
        // })
        this.tips('上传文件不得大于30M', 'warning')
        return false
      }
      if (file.size <= 0) {
        // this.fileList.unshift({name: this.fileName.filename, url: ''})
        this.tips('上传文件不得为空', 'warning')
        // console.log(this.fileList)
        return false
      }
      this.fileName.filename = file.name
      this.uploadState = true
      this.fileError = ''
    },
    uploadSuccess(res, file, List) {
      // let that = this
      if (res.code === 1) {
        if (res.data && res.data.length !== 0) {
          let respone = res.data[0]
          this.postDataAtr.push(respone)
          let names = ''
          let urls = ''
          this.postDataAtr.map(item => {
            this.fileList.push({
              name: item.fileName,
              url: item.resOriginalUrl
            })
          })
          this.fileList = _.uniq(this.fileList, true, function(item) {
            return item.name + item.url
          })
          this.fileList.map(item => {
            names += item.name + ','
            urls += item.url + ','
          })
          // console.log(names)
          this.form.attachmentName = names.slice(0, names.length - 1)
          this.form.attachmentPath = urls.slice(0, urls.length - 1)
        }
      } else {
        this.tips(res.msg, 'warning')
      }
      this.uploadState = false
    },
    uploadError() {
      this.tips('上传失败：' + '系统错误', 'error')
      this.uploadState = false
    },
    delFile(file, list) {
      this.postDataAtr = []
      if (list.length !== 0) {
        list.map(item => {
          this.postDataAtr.push({
            fileName:item.name,
            resOriginalUrl:item.url
          })
        })
        let names = ''
        let urls = ''
        this.postDataAtr.map(item => {
          this.fileList.push({
            name: item.fileName,
            url: item.resOriginalUrl
          })
        })
        this.fileList = _.uniq(this.fileList, true, function(item) {
          return item.name + item.url
        })
        this.fileList.map(item => {
          names += item.name + ','
          urls += item.url + ','
        })
        this.form.attachmentName = names.slice(0, names.length - 1)
        this.form.attachmentPath = urls.slice(0, urls.length - 1)
      }
      console.log(this.postDataAtr)
    },
    // 上传附件 状态打开
    uploadShow() {
      this.show = true
    },
    // 处理结果改变
    changeCase() {
      this.listValue = ''
      this.operateValue = ''
      this.remarks = ''
      if (this.form.casename === '移交工商' || this.form.casename === '归档') {
        // 移交工商和归档都需要填写监管状态
        this.caseShow = true
      } else {
        this.caseShow = false
      }
    },
    // 监管状态改变
    changeDialog() {
      this.listValue = ''
      this.operateValue = ''
      this.remarks = ''
      this.formShow = true
    },
    // 确定监管状态dialog
    dialogSure() {
      // console.log(111)
      let realName = this.$store.state.user.userInfo.realName
      let params = {
        isAvailable: 0,
        realName:realName,
        entName: this.entname
      }
      if (this.form.oprateId) {
        params.oprateId = this.form.oprateId
      }
      if (this.form.controlStatus !== '重点监控' && this.form.controlStatus !== '一般监控') {
        if (!this.listValue || !this.operateValue) {
          this.errMsg = this.form.controlStatus === '设为安全' ? '操作原因或安全期限缺少' : '白名单类型或安全期限缺少'
          return false
        }
        if (this.listValue) {
          // 原因
          params.oprateReson = this.listValue
        } else {
          delete params.oprateReson
        }
        if (this.operateValue) {
          // 年限
          params.timeLimit = this.operateValue
        } else {
          delete params.timeLimit
        }
        if (this.remarks) {
          // 备注
          params.remarks = this.remarks
        } else {
          delete params.remarks
        }
        if (this.form.controlStatus === '设为安全') {
          params.status = 2
          params.oprateReson = this.securityDate5[params.oprateReson - 28]
          params.timeLimit = this.securityDate2[params.timeLimit - 9]
        } else if (this.form.controlStatus === '白名单企业') {
          params.status = 4
          params.oprateReson = this.securityDate[params.oprateReson - 18]
          params.timeLimit = this.securityDate3[params.timeLimit]
        } else {
          delete params.status
        }
        api.getAddOperationRecord(params).then(res => {
          if (res.data.id) {
            this.errMsg = ''
            this.form.oprateId = res.data.id
          }
        }).catch(err => {
          console.log(err)
        })
      } else {
        if (this.form.controlStatus === '重点监控') {
          params.status = 1
        } else if (this.form.controlStatus === '一般监控') {
          params.status = 0
        }
        // console.log(params)
        api.getAddOperationRecord(params).then(res => {
          if (res.data.id) {
            this.form.oprateId = res.data.id
            console.log(res)
          }
        }).catch(err => {
          console.log(err)
        })
      }
      this.formShow = false
    },
    dialogClose() {
      this.listValue = ''
      this.operateValue = ''
      this.remarks = ''
      this.errMsg = ''
      this.formShow = false
      this.form.controlStatus = ''
      delete this.form.controlStatus
    },
    // 关闭dialog
    resetShow(blur) {
      this.show = blur.cancleClose
    },
    // 保存
    onSave() {
      this.mesgFlag = true
      this.formData(2)
      // 保存数据
      this.mesgFlag = false
    },
    // 发送
    onSubmit() {
      this.subFlag = true
      this.formData(1)
      // 发送到相应的详情表里
      this.subFlag = false
    },
    formData(interfaceType) {
      if (interfaceType) {
        this.form.interfaceType = interfaceType
      }
      this.form.id = this.id
      if (this.form.casename !== '移交工商' && this.form.casename !== '归档') {
        // 进行归档，不用监管，直接进入到黑名单
        delete this.form.oprateId
        delete this.form.controlStatus
      }
      // if (this.form.controlStatus !== '设为安全' && this.form.controlStatus !== '白名单企业') {
      //   // 进行归档，不用监管，直接进入到黑名单
      //   delete this.form.oprateId
      // }
      // console.log(this.form)
      this.caseTypes.map((item, ind) => {
        if (item === this.form.casename) {
          this.form.caseType = ind + 1
        }
      })
      if (!this.form.condition || !this.form.caseType || !this.form.attachmentName || !this.form.attachmentPath) {
        this.$msgbox({
          title: '必传数据缺少',
          message: '<span>排查情况或处理结果或排查文件缺少</span>',
          center: true,
          roundButton: true,
          customClass: 'messageBox',
          type: 'info',
          dangerouslyUseHTMLString: true,
          callback: () => {}
        })
        return false
      } else {
        let params = {
          oprateId:this.form.oprateId,
          caseType:this.form.caseType,
          attachmentPath:this.form.attachmentPath,
          attachmentName:this.form.attachmentName,
          condition:this.form.condition,
          id:this.form.id,
          interfaceType:this.form.interfaceType
        }
        console.log(params)
        mpi.getprocessHand(params).then(res => {
          // console.log(res)
          this.$msgbox({
            title: '成功',
            message: interfaceType === 2?'<span>数据已成功保存</span>':'<span>数据已成功提交</span>',
            center: true,
            roundButton: true,
            customClass: 'messageBox',
            type: 'info',
            dangerouslyUseHTMLString: true,
            callback: () => {}
          })
          setTimeout(() => {
            this.getcaseList()
          }, 2000)
          if (interfaceType === 1) {
            this.form.condition = ''
            this.form.caseType = ''
            this.form.casename = ''
            this.caseShow = false
            this.form.controlStatus = ''
            this.form.attachmentName = ''
            this.form.attachmentPath = ''
            this.fileList = []
            this.fileLists = []
            setTimeout(() => {
              this.$router.push({path:'/managements'})
            }, 2000)
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .downmessage{
    width: 100%;
    .dialog {
      width: 600px;
    }
    .detail-dialog {
      h5 {
        font-weight: bold;
        padding: 10px 0;
      }
      .h5sure {
        margin-top: 15px;
        margin-bottom: 55px;
      }
      span {
        margin: 0 10px;
      }
      .ent-name {
        padding-left: 15px;
        width: 70%;
      }
      .btn {
        width: 100%;
        text-align: center;
        margin-top: 20px;
      }
      .save-btn {
        width: 20%;
      }
    }
    /deep/ .el-dialog__header {
      padding: 10px;
      background: #3f8ffa;
      .el-dialog__title {
        color: #fff;
      }
      .el-dialog__headerbtn {
        top: 12px;
        i {
          color: #fff;
        }
      }
    }
    .upfiles {
      text-decoration: underline;
      color: #1891ef;
    }
    .troubledown {
      padding: 5px 30px 15px 45px;
      height: auto;
      .table {
        border-radius: 3px;
        margin-bottom: 20px;
        border-collapse: collapse;
        width: 100%;
        text-align: center;
        td,
        th {
          border: 1px solid #e2e2e2;
          text-align: center;
          padding: 10px;
        }
        th {
          color: #999;
          background-color: #f5faff;
        }
      }
    }
    .pigeonhole {
      padding: 5px 30px 15px 45px;
      height: auto;
      .pl {
        padding-left: 20px;
      }
      .pr {
        padding-right: 20px;
      }
      .center {
        text-align: center;
      }
      .wid100 {
        width: 100px;
        margin: 0 20px;
      }
    }
    .file-list {
      // cursor: pointer;
      // color: #1891ef;
    }
    .errMsg {
      color: red;
      margin: 10px;      
    }
    .uploadingFiles span{
      margin: 0 15px;
    }
    .wid50 {
      width: 50% !important;
    }
  }
</style>


// WEBPACK FOOTER //
// src/view/managements/manageState.vue